Nuxt 대시보드 프로젝트 시리즈 (1): 프로젝트 생성 및 초기 설정

대시보드 개발의 첫걸음은 안정적인 프로젝트 환경을 구축하는 것입니다. Nuxt 3와 필수 라이브러리들을 설치하고 기본 폴더 구조를 잡아보겠습니다.

1. Nuxt 프로젝트 초기화

터미널을 열고 아래 명령어를 입력하여 새로운 Nuxt 프로젝트를 생성합니다.

npx nuxi@latest init my-dashboard
cd my-dashboard
npm install

프로젝트가 생성되면 정상적으로 작동하는지 확인합니다.

npm run dev

2. 필수 라이브러리 설치

대시보드 구축에 필요한 Naive UI, UnoCSS, Pinia를 설치합니다.

npm install -D naive-ui unocss @unocss/nuxt
npm install pinia @pinia/nuxt

3. Nuxt 설정 업데이트 (nuxt.config.ts)

설치한 모듈들을 Nuxt가 인식하도록 설정을 변경합니다.

// nuxt.config.ts
export default defineNuxtConfig({
  modules: [
    '@unocss/nuxt',
    '@pinia/nuxt',
  ],
  
  // Naive UI는 SSR 시 스타일 주입 설정이 필요합니다
  build: {
    transpile: ['naive-ui', 'vueuc', '@css-render/vue3-ssr']
  },
  
  vite: {
    optimizeDeps: {
      include: ['naive-ui', 'vueuc', 'date-fns-tz/formatInTimeZone']
    }
  }
})

4. 폴더 구조 설계

대규모 프로젝트로 확장될 것을 대비하여 미리 폴더 구조를 정의합니다.

• components/: 재사용 가능한 UI 조각들.
• layouts/: 대시보드 레이아웃(사이드바 포함).
• pages/: 실제 주소와 매칭되는 페이지들.
• stores/: Pinia 상태 관리 파일들.
• plugins/: Naive UI 플러그인 설정.

5. 결론

이제 대시보드 제작을 위한 모든 준비가 끝났습니다. 다음 글에서는 UnoCSS를 통해 스타일 시스템을 구축하고, Naive UI의 테마를 설정하는 방법을 알아보겠습니다.